<script setup lang="ts">
//  引入图表
import Charts from '@/components/charts.vue';
// 引入options数据
import { MapOptions } from "@/utils/option"
import * as  echarts from 'echarts';
import 'echarts-gl';
//  引入 jquery
import $ from "jquery"
// 引入vue
import { ref, onMounted } from "vue"
// 定义数据
const geoJson = ref()

var option;


// https://geo.datav.aliyun.com/areas_v3/bound/100000_full.json
const mycharts = ref()
onMounted(() => {
    var myChart = echarts.init(mycharts.value);

    myChart.showLoading();
    $.get("https://geo.datav.aliyun.com/areas_v3/bound/100000_full.json", function (geoJson) {
        myChart.hideLoading();
        echarts.registerMap('china', geoJson);
        myChart.setOption(
            (option = {

                // title: {
                //     sublink:
                //         'http://zh.wikipedia.org/wiki/%E9%A6%99%E6%B8%AF%E8%A1%8C%E6%94%BF%E5%8D%80%E5%8A%83#cite_note-12'
                // },
                tooltip: {
                    trigger: 'item',
                    formatter: '{b}<br/>{c} (p / km2)'
                },
                toolbox: {
                    show: true,
                    orient: 'vertical',
                    left: 'right',
                    top: 'center',
                },
                visualMap: {
                    min: 800,
                    max: 50000,
                    symbolSize: '100%',
                    text: ['毕业生数量', 'Low'],
                    // realtime: false,
                    calculable: true,
                    inRange: {
                        color: ['#f6efa6', '#d88172', '#bf444c'],
                        // symbolSize: [30, 100]
                    },
                    // left: "20%",
                    // bottom: "10px",

                    // itemWidth: "100%" 颜色选择器宽度
                },
                series: [
                    {
                        // name: '香港18区人口密度',
                        type: 'map',
                        map: 'china',
                        // aspectScale: 0.8,
                        zoom: 1.7,
                        layoutCenter: ["50%", "50%"], //地图位置
                        // layoutSize: '100%',
                        // zoom: 1, //当前视角的缩放比例
                        roam: true, //是否开启平游或缩放
                        center: [105, 35],
                        scaleLimit: { //滚轮缩放的极限控制
                            min: 1,
                            max: 2
                        },
                        label: {
                            // show: true
                        },
                        // 样式
                        itemStyle: {
                            normal: {
                                areaColor: "#00b9ff",
                                borderColor: "#000",
                                borderWidth: 0.5
                            },

                            emphasis: {
                                areaColor: "#fcc",
                                shadowOffsetX: 0,
                                shadowOffsetY: 0,
                                shadowBlur: 5,
                                borderWidth: 0,
                                shadowColor: "rgba(0, 0, 0, 0.5)"
                            }
                        },
                        // 数据
                        data: [

                        ],
                        // 自定义名称映射
                        nameMap: {

                        }
                    }
                ]
            })
        );
    });
    option && myChart.setOption(option);
})

</script>


<template>
    <!-- 中上地图 -->
    <div class="center-top_container">
        <div class="charts" ref="mycharts">

        </div>
        <!-- <Charts :option="MapOptions" :geoJson?="geoJson"></Charts> -->
    </div>
</template>

<style scoped lang="scss">
.center-top_container {
    width: 100%;
    height: 60%;
    // border: 1px solid #cc0;
    position: relative;
    top: -60px;
    z-index: 999999999999;

    .charts {
        width: 100%;
        height: 100%;
        // position: absolute;
        // z-index: 99999;
    }
}
</style>
